<template>
  <el-container>
    <el-header>
      <h1>在线答疑</h1>
    </el-header>

    <el-main>
      <el-card>
        <el-input
          v-model="newQuestion"
          placeholder="请输入您的问题"
          clearable
        ></el-input>
        <el-button type="primary" @click="addQuestion">提问</el-button>
      </el-card>

      <div v-for="(question, index) in questions" :key="index" class="mt-4">
        <el-card>
          <p><strong>问题:</strong> {{ question.text }}</p>
          <p v-if="question.answer"><strong>回答:</strong> {{ question.answer }}</p>
          <el-button type="success" @click="openAnswerDialog(index)">解答</el-button>
        </el-card>
      </div>
    </el-main>

    <!-- 解答对话框 -->
    <el-dialog  v-model:someProp="dialogVisible" title="解答问题">
      <el-input
        type="textarea"
        v-model="currentAnswer"
        placeholder="请输入您的解答..."
      ></el-input>
      <span slot:="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAnswer">确定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      newQuestion: '',
      questions: [],
      dialogVisible: false,
      currentAnswerIndex: null,
      currentAnswer: ''
    };
  },
  methods: {
    addQuestion() {
      if (this.newQuestion.trim()) {
        this.questions.push({ text: this.newQuestion, answer: '' });
        this.newQuestion = '';
      }
    },
    openAnswerDialog(index) {
      this.currentAnswerIndex = index;
      this.currentAnswer = this.questions[index].answer || '';
      this.dialogVisible = true;
    },
    saveAnswer() {
      if (this.currentAnswerIndex !== null) {
        this.$set(this.questions[this.currentAnswerIndex], 'answer', this.currentAnswer);
        this.dialogVisible = false;
      }
    }
  }
};
</script>

<style scoped>
.el-header, .el-main {
  padding: 20px;
}
</style>
